<template>
  <div
    class="w-[50px] flex flex-col items-center justify-center cursor-pointer select-none"
  >
    <el-icon
      size="23"
      :color="props.color"
      class="cursor-pointer mx-[20px] mb-[3px]"
    >
      <component :is="props.icon" />
    </el-icon>
    <span
      class="text-[#ccc] text-[11px]"
      :style="{
        color: props.color,
      }"
      >{{ props.name }}</span
    >
  </div>
</template>

<script setup lang="ts">
import {} from "vue";
type Props = {
  name: string;
  icon: string;
  color?: string;
};
// <el-icon><Guide /></el-icon>
let props = withDefaults(defineProps<Props>(), {
  name: "说明",
  icon: "",
  color: "white",
});
</script>

<style scoped lang="scss"></style>
